<template>
  <a-modal v-model="visible" title="取消报名记录" footer="" width="50%">
    <div class="cancel-record-container">
      <div v-for="item in cancelDatas" class="cancel-record-box">
        <a-descriptions :column="1">
          <template #title>
            <span>取消申请信息</span>
            <a-tag class="_ml-16" :color="registrationStatusObj(item.approvalStatus).color"
              >{{ registrationStatusObj(item.approvalStatus).dictLabel }}
            </a-tag>
          </template>
          <a-descriptions-item label="提交时间">{{ item.cancelTime }}</a-descriptions-item>
          <a-descriptions-item label="取消人">{{ item.cancelPersonName }} </a-descriptions-item>
          <a-descriptions-item label="取消原因">{{ item.cancelReason }} </a-descriptions-item>
        </a-descriptions>

        <a-descriptions title="审核信息" :column="1">
          <a-descriptions-item label="审核人"> {{ item.verifyName }}</a-descriptions-item>
          <a-descriptions-item label="审核时间"> {{ item.verifyTime }}</a-descriptions-item>
          <a-descriptions-item label="审核说明">{{ item.remarks }} </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { activityRegisterUnionCancelRecord } from '@/api/activity/activity'
export default {
  name: 'CancelRecord',
  components: {},

  data() {
    return {
      visible: false,
      cancelDatas: []
    }
  },
  methods: {
    registrationStatusObj(approvalStatus) {
      return this.Dict.getLocal('rosterApprovalStatusDict').find(item => item.dictValue == approvalStatus) || {}
    },
    async queryActivityRegisterUnionCancelRecord(registerId) {
      const res = await activityRegisterUnionCancelRecord(registerId)
      this.cancelDatas = res.data
    },
    openModal(registerId) {
      this.visible = true
      this.queryActivityRegisterUnionCancelRecord(registerId)
    }
  }
}
</script>
<style lang="less" scoped>
.cancel-record-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 500px;
  .cancel-record-box {
    display: flex;
    padding: 20px;
    background-color: #f7f8fa;
    border-radius: 8px;
    justify-content: space-between;
  }
}
</style>
